<template>
  <div class="wrapper">
    <el-card>
      <div class="rowDiv">
        <div class="row-left">
          <div class="row-item">
            父级模块:<el-select
              v-model="state.waretype"
              @change="getOrderlist"
              clearable
              placeholder="选择订222单状态"
            >
              <el-option label="待审核" value="1"></el-option>
              <el-option label="已完成" value="6"></el-option>
              <el-option label="已取消" value="20"></el-option>
            </el-select>
          </div>
          <div class="row-item">
            子集模块:<el-select
              v-model="state.waretype"
              @change="getOrderlist"
              clearable
              placeholder="选择订单状态"
            >
              <el-option label="待审核" value="1"></el-option>
              <el-option label="已完成" value="6"></el-option>
              <el-option label="已取消" value="20"></el-option>
            </el-select>
          </div>
          <div class="row-item">
            所属系统:<el-select
              v-model="state.waretype"
              @change="getOrderlist"
              clearable
              placeholder="选择订单状态"
            >
              <el-option label="待审核" value="1"></el-option>
              <el-option label="已完成" value="6"></el-option>
              <el-option label="已取消" value="20"></el-option>
            </el-select>
          </div>
          <div class="row-item">
            类型:<el-select
              v-model="state.waretype"
              @change="getOrderlist"
              clearable
              placeholder="选择订单状态"
            >
              <el-option label="待审核" value="1"></el-option>
              <el-option label="已完成" value="6"></el-option>
              <el-option label="已取消" value="20"></el-option>
            </el-select>
          </div>
          &nbsp;&nbsp;
          <el-button type="primary" @click="create_model">创建模块</el-button>
        </div>
        <div class="row-right">
          <searchDiv
            :placeholder="state.placeholder"
            @searchClick="searchClick"
          ></searchDiv>
        </div>
      </div>
      <!-- 自己组造数据 -->
      <el-table :data="state.tableData" style="width: 100%; margin-top: 20px">
        <el-table-column prop="pre_id" label="序号"> </el-table-column>
        <el-table-column label="等级" prop=""></el-table-column>
        <el-table-column label="图标" prop=""></el-table-column>
        <el-table-column label="父级模块" prop=""></el-table-column>
        <el-table-column label="子级模块" prop=""></el-table-column>
        <el-table-column label="地址" prop=""></el-table-column>
        <el-table-column label="类型" prop=""></el-table-column>
        <el-table-column label="所属页面" prop=""></el-table-column>
        <el-table-column label="所属系统" prop=""></el-table-column>
        <el-table-column label="描述" prop=""></el-table-column>
        <el-table-column label="是否生成菜单项" prop=""></el-table-column>
        <el-table-column label="编辑时间" prop=""></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              v-if="scope.row.can_verify"
              @click.prevent="editBtn(scope.row)"
              type="text"
              size="small"
            >
              编辑
            </el-button>
            <el-button
              v-if="scope.row.can_verify"
              @click.prevent="delBtn(scope.row)"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Page
        v-if="state.totalPage"
        :totalPage="state.totalPage"
        @changePage="changePage"
      ></Page>
      <!-- 创建模块 -->
      <el-drawer
        title="创建模块"
        v-model="state.create_model_diaglog"
        direction="rtl"
        :before-close="handleClose"
        destroy-on-close
        size="30%"
      >
        <div class="conTxt">
          <el-form
            :model="state.model_form"
            :rules="state.rules"
            ref="mutilform"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="图标" prop="icon">
              <Upload
              :action="state.model_form.up_url"
              :is_open=0
               @onSuccess="onSuccess">
                <img
                  v-if="state.pic_info.url"
                  :src="'http://'+state.pic_info.url"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </Upload>
            </el-form-item>
            <el-form-item label="父级模块">
              <el-select
                type="date"
                placeholder="请选择"
                @change="change_parent_model"
                v-model="state.model_form.parent_model"
                style="width: 100%"
              >
                <template v-for="item in state.order_type_arr" :key="item.id">
                  <el-option :label="item.name" :value="item.id"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="子级模块" prop="child_model">
              <el-input
                type="text"
                placeholder="请输入子集"
                v-model="state.model_form.child_model"
                style="width: 100%"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="模块类型" prop="model_type">
              <el-radio-group v-model="state.model_form.model_type">
                <el-radio label="1">页面</el-radio>
                <el-radio label="0">功能</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="所属页面">
              <el-select
                placeholder="请选择父级模块后进行操作"
                v-model="state.model_form.belong_page"
                style="width: 100%"
              >
                <template v-for="item in state.belong_page_arr" :key="item.id">
                  <el-option :label="item.name" :value="item.id"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="模块序号">
              <el-input v-model="state.model_form.model_serino"></el-input>
            </el-form-item>
            
            <el-form-item label="模块地址">
              <el-select
                allow-create
                filterable
                default-first-option
                placeholder="可输入/可选择/按回车确定(例：/oa/abc/)"
                v-model="state.model_form.model_address"
                style="width: 100%"
              >
                <template v-for="item in state.model_address_arr" :key="item">
                  <el-option :label="item" :value="item"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="系统所属" prop="system_belong">
              <el-select
                type="date"
                placeholder="请选择"
                v-model="state.model_form.system_belong"
                style="width: 100%"
              >
                <template
                  v-for="item in state.system_belong_arr"
                  :key="item.id"
                >
                  <el-option :label="item.type" :value="item.id"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item
              label="是否生成菜单项"
              label-width="120px"
              prop="is_has_menu_item"
            >
              <el-radio-group v-model="state.model_form.is_has_menu_item">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="模块描述" prop="model_descripe">
              <el-input
                type="textarea"
                v-model="state.model_form.model_descripe"
              ></el-input>
            </el-form-item>
            <span class="dialog-footer">
              <el-button @click="state.create_model_diaglog = false"
                >取 消</el-button
              >
              <el-button type="primary" @click="create()">创 建</el-button>
            </span>
          </el-form>
        </div>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  onMounted,
  watch,
  computed,
  getCurrentInstance,
  provide,
} from "vue";
import { ElNotification } from "element-plus";
import searchDiv from "@/components/Search.vue";
import Page from "../../components/Pagination.vue";
import Upload from "@/components/Upload.vue";
import Preview from "@/components/Preview_img.vue";
import { useStore } from "vuex";
export default {
  name: "ability_list",
  components: {
    searchDiv,
    Page,
    Upload,
    Preview,
  },
  props: {},
  setup() {
    let mutilform = ref("null");
    const { ctx } = getCurrentInstance();
    const store = useStore();
    let state = reactive({
      create_model_diaglog: false,
      pic_info:'',  //上传的图标 id  名称 信息
      model_form: {
        icon:'',
        up_url: "/api/base/file/user_file/file_upload/",
        parent_model: "",
        child_model: "",
        model_type: "",
        belong_page: "",
        model_address: "",
        system_belong: "",
        is_has_menu_item: "",
        model_descripe: "",
      },
      belong_page_arr: [],
      system_belong_arr: [],
      model_address_arr: [],
      show_window: false,
      placeholder: "请输入您要搜索的",
      common_id: "",
      waretype: "",
      show_current_url: "",
      show_current_arr: [],
      approve_dialogVisible: false,
      file_list: [],
      value1: [],
      begin_date: "",
      end_date: "",
      page: 1,
      waretype: "",
      totalPage: 1,
      keywords: "",
      result: [],
      ruleForm: {
        chose_type: "",
        note: "",
      },
      rules: {
        child_model: [
          { required: true, message: "请输入子集模块", trigger: "blur" },
        ],
        model_type: [
          { required: true, message: "请选择模块类型", trigger: "change" },
        ],
        model_serino: [
          { required: true, message: "请选择模块序号", trigger: "blur" },
        ],
        system_belong: [
          { required: true, message: "请选择系统所属", trigger: "change" },
        ],
        is_has_menu_item: [
          {
            required: true,
            message: "请选择是否生成菜单项",
            trigger: "change",
          },
        ],
      },
    });

    // 打开创建模块弹窗
    function create_model() {
      state.create_model_diaglog = true;
      let item = state.model_form;
      state.pic_info='';
      item.parent_model = "";
      item.child_model = "";
      item.model_type = "";
      item.belong_page = "";
      item.model_serino = "";
      item.model_address = "";
      item.system_belong = "";
      item.is_has_menu_item = "";
      item.model_descripe = "";
      state.belong_page_arr=[];
      performence();
    }
    // 图片上传回调
    function onSuccess(e) {
       console.log("接收到子组件的回调", e);
      state.model_form.icon=e.url;
      state.pic_info=e;
    }
    // 多功能统一
    function performence(){
       ctx.$http
        .get("/middle/oa/get_api_data/")
        .then((res) => {
          if (res.errno == 0) {
              state.order_type_arr=res.data.parent;
              state.system_belong_arr=res.data.system;
              state.model_address_arr=res.data.api_site.url;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 获取所属页面(需要传父级id)
    function get_belong_page(id) {
      ctx.$http
        .post("/middle/oa/get_page/", {
          parent_id: id,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.belong_page_arr = res.data;
            //  console.log("获取所属页面",res)
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 关闭
    function handleClose(done) {
      if (confirm("是否关闭")) {
        done();
      }
    }
    // 提交创建模块
    function create() {
      let item = state.model_form;
      let data = {
        icon:state.model_form.id || "",
        parent: item.parent_model,
        name: item.child_model,
        des: item.model_descripe,
        url: item.model_address,
        is_view: item.model_type,
        is_menu: item.is_has_menu_item,
        sys_type: item.system_belong,
        rank: item.model_serino,
        page: item.belong_page,
      };
      console.log(data);
      mutilform.value.validate((valid) => {
        if (valid) {
          ctx.$http
            .post("/middle/oa/interface_enter/", data)
            .then(async (res) => {
              if (res.errno == 0) {
                ElNotification.success(res.errmsg);
                state.create_model_diaglog = false;
                const update_route = await store.dispatch("get_menu");
                store.dispatch("addUserMenus", update_route);
              } else {
                ElNotification.error(res.errmsg);
              }
            })
            .catch((err) => {
              ElNotification.error(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
    // 搜索框
    function searchClick(e) {
      console.log(e);
      state.keywords = e;
      getOrderlist();
    }
    onMounted(() => {
      // getOrderlist();
      // performence();
    });
    // 父级模块更改
    function change_parent_model(e) {
      get_belong_page(e);
    }
    // 获取页面数据
    function getOrderlist() {
      ctx.$http
        .get("", {
          status: state.waretype,
          start_date: state.begin_date,
          end_data: state.end_date,
          keywords: state.keywords || "",
          buyer_id: "",
          page_count: "",
          page: state.page,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.result = res.data.result;
            state.totalPage = res.data.page_count;
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 编辑
    function editBtn(item) {
      state.create_model_diaglog = true;
    }
    // 删除
    function delBtn(item) {
      state.create_model_diaglog = true;
    }
    return {
      editBtn,
      create_model,
      mutilform,
      state,
      getOrderlist,
      searchClick,
      onSuccess,
      create,
      delBtn,
      handleClose,
      change_parent_model,
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  .el-card {
    height: 100%;
    overflow-y: auto;
    .cart-title::before {
      content: " ";
      width: 4px;
      height: 20px;
      background: #1890ff;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }
    .rowDiv {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .row-left {
        display: flex;
        width: 70%;
        justify-content: space-between;
        .row-item {
          display: flex;
          align-items: center;
          white-space: nowrap;
          margin-right:30px;
        }
      }
      .row-right {
        width: 15%;
        display: flex;
        justify-content: flex-end;
      }
    }
    .el-table /deep/ th {
      background-color: #eaeaea;
      text-align: center;
    }
    .el-table /deep/ td {
      text-align: center;
    }
    .el-select {
      width: 100%;
    }
    // 组装table
    .order-headr-fixed {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
      font-size: 13px;
      border: none;
      color: #909399;
      th {
        text-align: center;
        background: #eaeaea;
        padding: 8px 0;
        border: none;
      }
    }
    // 订单表格
    .order_list {
      .orderTb {
        width: 100%;
        border-collapse: collapse;
        border: none;
        font-size: 14px;
        margin-top: 8px;
      }
      .orderTb tr td {
        padding: 8px;
      }
      .orderTb tr th {
        padding: 0;
        border: none;
      }
      .orderTb:hover {
        background: #f7f8fa;
      }
      .p-double {
        background: #f7f8fa;
      }
      .navFlex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f7f8fa;
        .flexleft {
          display: flex;
          align-items: center;
          width: 84%;
          .nav-item {
            margin-right: 80px;
          }
        }
        .flexright {
          cursor: pointer;
          color: rgb(46, 127, 181);
          position: relative;
          flex: 1;
          display: flex;
          justify-content: flex-end;
        }
      }
      .cssFlex {
        display: flex;
        justify-content: space-between;
        .logs-right {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          .editLog {
            cursor: pointer;
            color: rgb(46, 127, 181);
          }
        }
      }
      .optionDiv {
        padding: 4px 0;
        cursor: pointer;
        color: rgb(46, 127, 181);
      }
      .optionDiv:hover {
        text-decoration: underline;
      }
    }
    .handDiv {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      padding: 4px 0;
      margin-right: 5px;
      list-style: none;
    }
  }
  .conTxt {
    padding: 0 20px;
    width: 80%;
    margin: auto;
    box-sizing: border-box;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border: 1px dashed gainsboro;
  }
}
</style>